{% extends "dvaui/base.html" %}
{% load staticfiles %}
{% block page_content %}
<section class="content-header" style="padding-top:0px" xmlns="http://www.w3.org/1999/html">
<div class="row">
    <div class="box box-info">
        <div class="box-header">
            <h2>Launch new DVAPQL process or use / create a template</h2>
            {% if is_paginated %}
                <div class="pagination text-center" style="width:100%">
                    <span class="page-links">
                        {% if page_obj.has_previous %}
                            <a class="btn btn-info" style="float:left" href=".?page={{ page_obj.previous_page_number }}"><i class="fa fa-backward"></i>  Go back</a>
                        {% endif %}
                        <span class="page-current " style="font-size:24pt;font-weight:bold">
                            {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
                        </span>
                        {% if page_obj.has_next %}
                            <a class="btn btn-info" style="float:right" href=".?page={{ page_obj.next_page_number }}">Load more  <i class="fa fa-forward"></i></a>
                        {% endif %}
                    </span>
                </div>
            {% endif %}
        </div>
    </div>
</div>
</section>
<section class="content">
    <div class="row">
        <div class="col-lg-6">
            <form method="post" action="/submit_process">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h4>Launch a processing or query task specified using DVAPQL</h4>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-lg-12 text-center">
                            <textarea name="script" id="script" style="display:none" ></textarea>
                            <div id="editor" style="width:90%;margin:auto;height:400px" ></div>
                        </div>
                    </div>
                </div>
                <div class="box-footer text-center">
                    {% csrf_token %}
                    <button class="btn btn-primary" type="submit">Submit & launch</button>
                </div>
            </div>
            </form>
        </div>
        <div class="col-lg-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h4>Stored process templates
                        <a class="btn btn-success" href="/external" style="float: right" > <i class="fa fa-globe"></i> Import scripts from external server</a>
                    </h4>
                </div>
                <div class="box-body">
                    <table class="table dataTables">
                    <thead>
                    <tr>
                        <th class="text-center">User</th>
                        <th class="text-center">Name</th>
                        <th class="text-center">Since</th>
                        <th class="text-center">Created</th>
                        <th class="text-center">Details</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for p in object_list %}
                        <tr>
                            <td>{{ p.creator }}</td>
                            <td>{{ p.name }}</td>
                            <td class="text-center">{{ p.created|timesince}}</td>
                            <td class="text-center">{{ p.created }}</td>
                            <td class="text-center">
                            <a href="/stored_process/{{ p.pk }}">details</a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
    <div class="col-lg-12" id="shortcuts">
        <div class="box box-primary">
            <div class="box-header with-border text-center">
                <h2>Shortcut for processing videos, creating training sets, models etc</h2>
                <h4>Following forms auto-generate a DVAPQL query and executes it using selected values</h4>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="box box-primary">
            <form action="/shortcuts" method="POST">
            <div class="box-header with-border">
                <h4>Index frames/regions, detect objects, perform analysis</h4>
            </div>
            <div class="box-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="row">
                            <div class="col-lg-6"><div class="form-group">
                                <label for="excluded_videos">Select model</label>
                                <select class="js-example-basic-single" id="apply_model_pk" name="model_pk" style="width:100%">
                                {% for k in models %}
                                    <option value="{{ k.pk }}">{{ k.get_model_type_display }} : {{ k.name }}</option>
                                {% endfor %}
                                </select>
                        </div></div>
                        <div class="col-lg-2"><div class="form-group"><label>Frame batch size<input type="number" class="form-control" name="frames_batch_size"></label></div></div>
                        <div class="col-lg-2"><div class="form-group"><label>Segment batch size<input type="number" class="form-control" name="segments_batch_size"></label></div></div>
                        <div class="col-lg-2"><div class="form-group"><label>Target
                            <select class="js-example-basic-single" id="apply_target" name="target" style="width:100%">
                                <option value="frames" selected="selected">Frames</option>
                                <option value="regions">Regions</option>
                            </select>
                        </label>
                        </div>
                        </div>
                        </div>
                        <div class="form-group">
                            <label for="frame_video_name">Video</label>
                            <select class="js-example-basic-multiple" multiple="multiple" id="apply_video_pk" name="video_pk" class="form-control" style="width:100%">
                            {% for v in videos %}
                                <option value="{{ v.pk }}">{{ v.name }}</option>
                            {% endfor %}
                            </select>
                        </div>
                        <div class="row">
                        <div class="col-lg-12">
                            <label for="filters">Specify additional Django QuerySet filters as JSON (e.g. Frames.objects.filters(**{ "object_name" : "car" }))</label>
                            <textarea name="filters" id="script3" style="display:none" ></textarea>
                            <div id="editor3" style="width:95%;margin:auto;height:200px" ></div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-footer text-center">
                <div class="form-group">
                    {% csrf_token %}
                    <button class="btn btn-primary" name="op" value="apply" type="submit" style="display:inline-block;margin-right:12px">Apply model</button>
                </div>
            </div>
            </form>
        </div>
    </div>
    <div class="col-lg-6">
        <form action="/shortcuts" method="post">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h4>Create new retriever</h4>
            </div>
            <div class="box-body">
                    <div class="row">
                        <div class="col-lg-12 form-group">
                            <label for="name">name</label>
                            <input name="name" class="form-control" placeholder="name" required="required" type="text" >
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6 form-group">
                            <label for="selected">Indexer</label>
                            <select class="js-example-basic" id="selected_indexers" name="indexer_shasum"  style="width:100%">
                            {% for i in indexers %}
                                <option value="{{ i.shasum }}">{{ i.name }}</option>
                            {% endfor %}
                            </select>
                        </div>
                        <div class="col-lg-6 form-group">

                            <label for="selected">Approximator</label>
                            <select class="js-example-basic" id="selected_approximators" name="approximator_shasum"  style="width:100%">
                            {% for v in approximators %}
                                <option value="{{ v.shasum }}">{{ v.name }}</option>
                            {% endfor %}
                                <option value=""> None / Exact</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12 form-group">
                            <label for="source_filters">Specify additional source filter as JSON (IndexEntries.objects.filters(**kwargs))</label>
                            <textarea name="source_filters" id="script2" style="display:none" ></textarea>
                            <div id="editor2" style="width:95%;margin:auto;height:200px" ></div>
                        </div>
                    </div>
            </div>
            <div class="box-footer text-center">
                {% csrf_token %}<button name="op" value="create_retriever" class="btn btn-primary">Create new retriever</button>
            </div>
        </div>
        </form>
    </div>
    </div>
    <div class="row" id="shortcuts_training">
        <div class="col-lg-6">
        <form action="/shortcuts" method="post">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h4>Create training set for index approximation</h4>
            </div>
            <div class="box-body">
                    <div class="row">
                        <div class="col-lg-12 form-group">
                            <label for="name">name</label>
                            <input name="name" class="form-control" placeholder="name" required="required" type="text" >
                        </div>
                        <div class="col-lg-12 form-group">
                        <div class="form-group">
                            <label for="frame_video_name">Select Video / Datasets</label>
                            <select class="js-example-basic-multiple" multiple="multiple" id="approximator_training_video_pk" name="video_pk" class="form-control" style="width:100%">
                            {% for v in videos %}
                                <option value="{{ v.pk }}">{{ v.name }}</option>
                            {% endfor %}
                            </select>
                        </div>
                        </div>
                        <div class="col-lg-12 form-group">
                            <label for="selected">Select Indexer</label>
                            <select class="js-example-basic" id="approximator_training_indexers" name="indexer_shasum"  style="width:100%">
                            {% for i in indexers %}
                                <option value="{{ i.shasum }}">{{ i.name }}</option>
                            {% endfor %}
                            </select>
                        </div>
                    </div>
            </div>
            <div class="box-footer text-center">
                {% csrf_token %}<button name="op" value="create_approximator_training_set" class="btn btn-primary">Create Training set for Index approximation</button>
            </div>
        </div>
        </form>
        </div>
        <div class="col-lg-6">
            <form action="/shortcuts" method="post">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h4>Train an LOPQ approximator</h4>
                </div>
                <div class="box-body">
                        <div class="col-lg-12 form-group">
                            <div class="col-lg-12 form-group">
                            <label for="name">Model name</label>
                                <input name="name" class="form-control" placeholder="name" required="required" type="text" >
                            </div>
                            <label for="selected">Select Training Set (only built training sets are show)</label>
                            <select class="js-example-basic" id="lopq_training_set_pk" name="lopq_training_set_pk"  style="width:100%">
                            {% for i in approx_training_sets %}
                                <option value="{{ i.pk }}">{{ i.name }} ( id {{ i.pk }})</option>
                            {% endfor %}
                            </select>
                        </div>
                        <div class="col-lg-3 col-md-6"><div class="form-group"><label>components<input value="128" type="number" class="form-control" name="components"></label></div></div>
                        <div class="col-lg-3 col-md-6"><div class="form-group"><label>M<input type="number" value="32" class="form-control" name="m"></label></div></div>
                        <div class="col-lg-3 col-md-6"><div class="form-group"><label>V<input type="number" value="32" class="form-control" name="v"></label></div></div>
                        <div class="col-lg-3 col-md-6"><div class="form-group"><label>Sub-quantizers<input type="number" value="256" class="form-control" name="sub"></label></div></div>
                </div>
                <div class="box-footer text-center">
                {% csrf_token %}<button name="op" value="perform_approximator_training" class="btn btn-primary">Train LOPQ approximator</button>
                </div>
            </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h4>Create training set for training object detector</h4>
                </div>
                <div class="box-body">
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h4>Train a YOLO detector</h4>
                </div>
                <div class="box-body">
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
{% block page_js%}
<script>
    $(document).ready(function() {
        InitializeTables();
        // Run script
        var scripttext = document.getElementById("script");
        var editor = ace.edit("editor",{
            wrapBehavioursEnabled:true,
            autoScrollEditorIntoView:true});
        editor.setTheme("ace/theme/chrome");
        editor.getSession().setMode("ace/mode/json");
        var textarea = $('textarea[name="script"]').hide();
        editor.getSession().setValue(textarea.val());
        editor.getSession().on('change', function(){
          textarea.val(editor.getSession().getValue());
        });
        // apply script
        var scripttext3 = document.getElementById("script3");
        scripttext3.textContent = "";
        var editor3 = ace.edit("editor3",{
            wrapBehavioursEnabled:true,
            autoScrollEditorIntoView:true});
        editor3.setTheme("ace/theme/chrome");
        editor3.getSession().setMode("ace/mode/json");
        var textarea3 = $('textarea[name="filters"]').hide();
        editor3.getSession().setValue(textarea3.val());
        editor3.getSession().on('change', function(){
          textarea3.val(editor3.getSession().getValue());
        });
        // Retriever creation source_json
        var scripttext2 = document.getElementById("script2");
        scripttext2.textContent = "";
        var editor2 = ace.edit("editor2",{
            wrapBehavioursEnabled:true,
            autoScrollEditorIntoView:true});
        editor2.setTheme("ace/theme/chrome");
        editor2.getSession().setMode("ace/mode/json");
        var textarea2 = $('textarea[name="source_filters"]').hide();
        editor2.getSession().setValue(textarea2.val());
        editor2.getSession().on('change', function(){
          textarea2.val(editor2.getSession().getValue());
        });
        //
        $("#selected_indexers").select2({theme: "bootstrap"});
        $("#approximator_training_indexers").select2({theme: "bootstrap"});
        $("#selected_approximators").select2({theme: "bootstrap"});
        $("#apply_target").select2({theme: "bootstrap"});
        $("#apply_model_pk").select2({theme: "bootstrap"});
        $("#lopq_training_set_pk").select2({theme: "bootstrap"});
        $("#apply_video_pk").select2({theme: "bootstrap",multiple:true});
        $("#approximator_training_video_pk").select2({theme: "bootstrap",multiple:true});
    })
</script>
{% endblock %}
